<script lang="ts" setup>
import { ref } from 'vue';

const toggleShow = () => {
  isShow.value = !isShow.value;
};
const isShow = ref(true);


// 1. 性别
const gender = ref(0) // 0-男 1-女 
// 2. 成绩
const score = ref(95)
</script>

<template>
  <button @click="toggleShow">显示按钮</button>
  <!-- 
  v-show控制的标签，还会保留在页面中，值为false时只是被隐藏
  通过style="display：none;"不可见，不占位（类似鸿蒙的Visibility.None） 
  -->
  <div class="box" v-show="isShow">我是通过 v-show 渲染的一个盒子</div>
  <!-- 
  v-if控制的标签，值为false时，不会创建，已创建的也会被删除（类似鸿蒙的if条件渲
  染) -->
  <div class="box" v-if="isShow">我是通过 v-if 渲染的一个盒子</div>

  <!-- v-if else -->
  <div>
    <p v-if="gender===0">性别：♂ 男</p>
    <p v-else>性别：♀ 女</p>
    <!-- hr 分割线，和鸿蒙中 divider 一样 -->
    <hr>
    <p v-if="score>=90">成绩评定A:奖励电脑一台</p>
    <p v-else-if="score>=80">成绩评定B:奖励周末郊游</p>
    <p v-else-if="score>=60">成绩评定C:奖励零食礼包</p>
    <p v-else>成绩评定D:惩罚一周不能玩手机</p>
  </div>
 
</template>

<style scoped>
.box{
  width: 300px;
  height: 200px;
  background-color: blueviolet;
  margin: 10px;
}
</style>